<template>
    <div class="container">
        <CommonTitle title-name="项目基本信息"></CommonTitle>
        <!--    项目基本信息      -->
        <el-card class="card-box" shadow="never">
            <el-form :inline="true">
                <el-row>
                    <el-col :span="11">
                        <el-form-item class="el-form-item-width" label="合同名称">
                            <el-input v-model="form.contractName" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="11">
                        <el-form-item class="el-form-item-width" label="项目名称">
                            <el-input v-model="form.projectName" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item class="el-form-item-width" label="合同编号">
                            <el-input v-model="form.contractId" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="11">
                        <el-form-item class="el-form-item-width" label="任务来源">
                            <el-input v-model="form.meetingTitle" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>

        <CommonTitle class="m-t30" title-name="承租方(签约方信息)"></CommonTitle>
        <!--    承租方(签约方信息)      -->
        <el-card class="card-box" shadow="never">
            <el-form :inline="true">
                <el-row>
                    <el-col :span="13">
                        <el-form-item class="el-form-item-width" label="承租方(签约方)名称">
                            <el-input :model-value="form.leaseCustomers && form.leaseCustomers.length !== 0
                                    ? form.leaseCustomers
                                        .map((item) => item.customerName)
                                        .join(',')
                                    : '暂无'
                                " disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="9">
                        <el-form-item class="el-form-item-width" label="签约(竞选)方式">
                            <el-input :model-value="form.signType === 1 ? '新签' : '续签'" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>

        <CommonTitle class="m-t30" title-name="出租资产和房源信息"></CommonTitle>
        <!--    出租资产和房源信息      -->
        <el-card class="card-box" shadow="never">
            <el-form :inline="true">
                <el-form-item class="el-form-item-width" label="资产名称">
                    <el-input v-model="form.assetsName" disabled />
                </el-form-item>
                <el-form-item class="el-form-item-width" label="资产位置">
                    <el-input v-model="form.address" disabled />
                </el-form-item>
                <el-row>
                    <el-col :span="9">
                        <el-form-item class="el-form-item-width" label="租赁面积">
                            <el-input v-model="form.leaseTotalArea" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="13">
                        <el-form-item class="el-form-item-width" label="房源明细">
                            <el-input :model-value="form.leaseHousings && form.leaseHousings.length !== 0
                                    ? form.leaseHousings[0].housingNumber
                                    : ''
                                " disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item class="el-form-item-width" label="租赁周期">
                            <el-input :model-value="form.signStartTime + '-' + form.signEndTime" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="11">
                        <el-form-item class="el-form-item-width" label="租赁用途">
                            <el-input v-model="form.businessPurpose" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>

        <CommonTitle class="m-t30" title-name="费用信息"></CommonTitle>
        <!--    出租资产和房源信息      -->
        <el-card class="card-box" shadow="never">
            <el-form label-position="left" label-width="100px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item class="el-form-item-width" label="我方收款账号">
                            <el-input :model-value="form.payeeAccount || ''" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="3"></el-col>
                    <el-col :span="6">
                        <el-form-item class="el-form-item-width" label="开户行">
                            <el-input :model-value="form.payeeBank || ''" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="3"></el-col>
                    <el-col :span="6">
                        <el-form-item class="el-form-item-width" label="保证金(元)">
                            <el-input v-model="form.deposit" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item class="el-form-item-width" label="合同金额">
                            <el-input v-model="form.contractTotalPrice" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="3"></el-col>
                    <el-col :span="6">
                        <el-form-item class="el-form-item-width" label="应收款总金额">
                            <el-input v-model="form.receivableTotalPrice" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="3"></el-col>
                    <el-col :span="6">
                        <el-form-item class="el-form-item-width" label="装修优惠期">
                            <el-input v-model="form.freeRentMonth" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item class="el-form-item-width" label="租金递增模式">
                            <el-input :model-value="`第${form.increaseStartYear || 0}年后开始递增`" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="3"></el-col>
                    <el-col :span="6">
                        <el-form-item class="el-form-item-width" label="递增比例">
                            <el-input v-model="form.increaseRate" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="3"></el-col>
                    <el-col :span="6">
                        <el-form-item class="el-form-item-width" label="支付方式">
                            <el-input :model-value="['', '月度', '季度', '半年', '年'][form.payType]" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-table class="m-t10" :data="form.leaseRentPlans" :header-cell-style="{ background: '#EDEDED' }" border
                style="width: 100%">
                <el-table-column prop="numberOfPeriods" label="期数" min-width="50"></el-table-column>
                <el-table-column prop="payStartTime" label="期间" min-width="50">
                    <template #default="scope">
                        <span>{{
                            scope.row.payStartTime + "-" + scope.row.payEndTime
                            }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="increaseRatio" label="递增(%)" min-width="70" />
                <el-table-column prop="rentUnitPrice" label="租金单价(元/㎡/月)" min-width="150" />
                <el-table-column v-if="form.payType === 1" prop="receivableRent" label="月度租金(元)" min-width="100" />
                <el-table-column v-if="form.payType === 2" prop="receivableRent" label="季度租金(元)" min-width="100" />
                <el-table-column v-if="form.payType === 3" prop="receivableRent" label="半年租金(元)" min-width="100" />
                <el-table-column v-if="form.payType === 4" prop="receivableRent" label="年底租金(元)" min-width="100" />
            </el-table>
        </el-card>

        <CommonTitle class="m-t30" title-name="协议经办方信息"></CommonTitle>
        <el-card class="card-box" shadow="never">
            <el-form>
                <el-row>
                    <el-col class="d-flex a-center" :span="3">
                        <el-form-item class="m-b0" label="经办人">
                            <span>{{ form.manageUserName || "暂无" }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col class="d-flex a-center" :span="3">
                        <el-form-item class="m-b0" label="部门">
                            <span>{{ form.departmentName }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col class="d-flex a-center" :span="3">
                        <el-form-item class="m-b0" label="">
                            <!-- <span>{{ form.departmentName }}</span> -->
                            <el-button type="primary" color="#fc702b" style="color: #fff"
                                @click="openHandler(form?.routeUrl)">查看审批流程</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>

        <div class="button-wrapper d-flex a-center j-center m-t30"></div>
    </div>
</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";
import {
    ElCard,
    ElRow,
    ElCol,
    ElForm,
    ElFormItem,
    ElTable,
    ElTableColumn,
} from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { contractApi } from "@/api/assets";
import { onMounted, reactive, ref } from "vue";

let form = ref({});

const tableData = reactive([]);

const router = useRouter();

// 从路由path中获取的
const getContractId = router.currentRoute.value.params.contractId;

// 查询会审单
const getHuiShenForm = () => {
    contractApi
        .getCheckupInfo({
            contractId: getContractId,
        })
        .then((res) => {
            form.value = res.data;
        });
};
const openHandler = (url = "") => {
    window.open(url);
};
onMounted(() => {
    getHuiShenForm();
});
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: auto !important;

    .card-box {
        width: 100%;

        .input-width {
            width: 548px;
        }

        .el-form-item-width {
            width: 100%;
        }
    }

    .button-wrapper {
        width: 100%;
    }
}
</style>
